<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>行程预览</title>
    <link rel="stylesheet" href="{$baseurl}__PUBLIC__/layui/css/layui.css" media="all">
    <link rel="stylesheet" href="{$baseurl}__CSS__/admin.css"  media="all">
</head>

<body style="background-color:#f2f2f2">
<script src="{$baseurl}__PUBLIC__/echarts/echarts.min.js"></script>
<link rel="stylesheet" href="{$baseurl}__PUBLIC__/layui/css/layui.css" media="all">
<link rel="stylesheet" href="{$baseurl}__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all">
<link rel="stylesheet" href="{$baseurl}__CSS__/admin.css"  media="all">
<script src="{$baseurl}__PUBLIC__/jquery/jquery.min.js"></script>
<!--<script src="{$Think.config.httpFlag}{$Think.config.google_map_url}" async="async"></script>-->
<!--<script src="/googlemap/googleDirectionsService.js"></script>-->
<style>
    .width1200{
        width: 800px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 40px;
        padding-bottom: 40px;
        background-color:#fff;
        padding:50px;
        margin-top:0;
        padding-top: 20px
    }
    .width800{
        width: 800px;
        margin: 0 auto;
        font-size: 16px;
        line-height: 40px;
        padding-bottom: 40px;
        padding:50px;
        margin-top:0;
        padding-top: 20px
    }
    .previewtitle{
        text-align: center;
        font-weight: 600
    }
    h3{
        margin-top: 20px;
    }
    .imgbox img{
        width: 48%;
        margin:0 4px 10px;
        height:240px;
    }
    #print{
        width: 200px;
        margin-left: 300px;
        background-color: #f90
    }
    h5{
        position: relative;
        display: inline-block;
        width: 50%
    }
    h4{
        position: relative;
    }
    h5:after,h4:after{
        content: '';
        position:absolute;
        display: inline-block;
        width: 5px;
        height: 20px;
        background-color: #f90;
        left: -15px;
        top: 9px
    }

    .border-line{
        border-bottom: 1px dashed #eee;
    }

    .space-show{
        white-space: pre-line;
    }

    .triangle{
        width: 30px;
        float:right;
        margin-top:15px;
    }

    .triangle .content{
        width: 0px;
        height: 5px;
        border: 5px solid;
        border-color:  #666 transparent transparent transparent;
    }

    .showOther div{
        margin:5px 10px;
    }
	/*分割线*/
    .hr_css{
        height: 0px;
        margin: 10px 0;
        border: 0;
        clear: both;
    }
    pre{
        white-space:pre-wrap;
        white-space:-moz-pre-wrap;
        white-space:-pre-wrap;
        white-space:-o-pre-wrap;
        word-wrap:break-word;
        font: 16px Helvetica Neue,Helvetica,PingFang SC,\5FAE\8F6F\96C5\9ED1,Tahoma,Arial,sans-serif;
        line-height: 40px;
    }
    .sub_day_title{
        line-height: 25px;
        padding: 0 4px;
        background: #ffb800;
        display: inline-block;
    }
</style>
<div style="width: 900px;margin: 0 auto" id="content">
    {empty name='trip.tob_pdf'}
    <div class="width1200">
        <img  style="width:150px;margin-left:325px" src="{$baseurl}__CSS__/logo.png">
    </div>
    {/empty}
    <div class="width1200" >
        <h3 class="previewtitle" style="font-size:22px;margin-bottom:50px">{notempty name="$name"}{$name}{/notempty}</h3>
        <h5 style="float:left" class="border-line">售卖时间：{notempty name="$saletime"}{$saletime}{/notempty}</h5>
        <h5 style="float:right" class="border-line">天数：{notempty name="$trip"}{$trip['days']}{/notempty}</h5>
        <!--<h5 style="float:left" class="border-line">人数：{notempty name="$trip"}{$trip['people']}{/notempty}</h5>-->
        <!--<h5 style="float:right;width:50%" class="border-line">定制师：{notempty name="$trip"}{$trip['admin']}{/notempty}</h5>-->
        {if isset($trip['service_language'])}<h5 style="float:left;width:50%" class="border-line">服务语言：{$trip['service_language']==1?'英文':'中文'}</h5>{/if}
        {notempty name="$trip.hours"}<h5 style="float:left;width:50%" class="border-line">服务时长：{$trip['hours']}</h5>{/notempty}
        {notempty name="$trip.start_person_num"}<h5 style="float:left;width:50%" class="border-line">起订人数：{$trip['start_person_num']}</h5>{/notempty}
        {notempty name="$trip.total_person_num"}<h5 style="float:left;width:50%" class="border-line">成团人数：{$trip['total_person_num']}</h5>{/notempty}
        <h5 style="float:left;width:100%" class="border-line">城市：{volist name="allcity" id="vo"}<span style="margin-right: 10px">{$vo}</span>{/volist}</h5>
        {notempty name="$trip['budget_price']"}<h5  style="float:left;width:100%" class="border-line">价格：{$trip['budget_price']}</h5>{/notempty}
        {notempty name="$trip['showintroduction']"}<h4 style="float:left;width:100%" class="border-line">简介：<p class="space-show" style="margin-left:50px;">{$trip['introduction']}</p></h4>{/notempty}

        <div style="clear:both"></div>

        {if in_array($trip['service_type'],$onlyShowDescServiceTypeIds)}
        <!--特殊类型只展示详情-->
        <div style="margin-bottom:70px;">
            <h3 style="font-weight:bold;color:#ec971f;line-height: 1;">产品详情：</h3>
            <div>{$trip['sale_details']}</div>
        </div>
        {elseif !empty($trip['is_text_plan'])}
        <!--文本行程 线路行程切换-->
        <div style="margin-bottom:70px;">
            <h3 style="font-weight:bold;color:#ec971f;line-height: 1;">行程概览：</h3>
            <div>{$trip['text_plan']}</div>
        </div>

        {else}
        <div style="margin-bottom:70px;">
            <h3 style="font-weight:bold;color:#ec971f;line-height: 1;">行程概览：</h3>
            <div>

                {volist name="keyArr" id="key1"}
                <div><a href="#{$key1.day_key}"><span style="color:#ec971f;">{$key1.day}</span><span style="font-weight:bold;">{$key1.daytitle}</span></a></div>
                {notempty name="key1.day_description"}
                <div style="line-height: 1.5;margin:12px;margin-left:64px;">
                    {$key1.day_description}
                </div>
                {/notempty}
                <div style="margin-left:64px;">
                    {volist name="key1.active" id="key2"}
                    <a href="#{$key2.id}"><span style="font-size:14px;border-bottom: 1px solid #333333db;">{$key2.title}</span></a>
                    &nbsp;&nbsp;
                    {/volist}
                </div>
                {/volist}


            </div>
        </div>

        {volist name="schedules" id="vo" key="k"}
        <a id="day_{$k}">
            <h3 class="previewtitle" style="color: #f90;font-size: 16px;border-top: 1px solid #eee"><strong>第{$k}天<span style="margin-left: 10px">{$vo.title}</span></strong></h3>
        </a>
        <!--<h6 class="previewtitle" style="color: #f90">{volist name="vo['citys']" id="city" }<strong style="display: inline-block;margin-right:25px">{$city}</strong>{/volist}</h6>-->
        <div class="hr_css"></div>
        {notempty name='$vo.day_description'}
        <h6 style="margin-left: 50px;border: none;">
            {$vo.day_description}
        </h6>
        {/notempty}
        {volist name="vo['child']" id="sub" key="subk"}
        <div class="hr_css"></div>
        <div>
        <div style="float: left;">
            <span style="margin-right: 10px;font-weight: bold;">{if $sub.time}{$sub.time}{/if}</span>
        </div>
        <div style="margin-left: 50px;">
            <div id="name_{$sub.id}">
                <span style="font-weight:bold;font-size: 14px">
                        {if $sub.title}
                        <p class="sub_day_title">{$sub.title}</p>
                        {else}
                            {if $sub.poiname}
                            <p class="sub_day_title">{$sub.poiname}</p>
                            {else}
                            <p class="sub_day_title">{$sub.cityname}</p>
                            {/if}
                        {/if}
                </span>
                {notempty name="$sub.time"}{/notempty}{notempty name='$sub.own_fee'}
                <button class="layui-btn layui-btn-xs layui-btn-normal" style="margin-left: 8px;">自费</button>
                {/notempty}
                {empty name="$showpwd"}
                <div class="triangle"><div class="content"></div></div>
                {/empty}
            </div>
            <div class="showOther" data-value="0" style="border:1px solid #7e7e7e73;display:none;">
                {notempty name="$sub['eng_introduce']"}<div>英文介绍：<span style="color: #7e7e7e">{$sub['eng_introduce']}</span> </div> {/notempty}
                {notempty name="$sub['open_time']"}<div>开放时间：<span style="margin-left: 10px">{$sub['open_time']}</span> </div> {/notempty}
                {notempty name="$sub['mobile']"}<div>联系方式：<span >{$sub['mobile']}</span></div>{/notempty}
                {notempty name="$sub['ticket']"}<div>门票信息：<span >{$sub['ticket']}</span></div>{/notempty}
                {notempty name="$sub['price']"}<div>价格：<span >{$sub['price']}</span></div>{/notempty}
                {notempty name="$sub['grade']"}<div>星级：<span >{$sub['grade']}</span></div>{/notempty}
                {notempty name="$sub['source']"}<div>来源：<span >{$sub['source']}</span></div>{/notempty}
                {notempty name="$sub['ticket_url']"}<div>订票官网：<span >{$sub['ticket_url']}</span></div>{/notempty}
                {notempty name="$sub['description']"}<div>特别说明：<span >{$sub['description']}</span></div>{/notempty}
            </div>
            {notempty name="$sub['goodsurl']"}<div><a style="color:dodgerblue;text-decoration: underline;" href="{$sub['goodsurl']}">查看商品详情</a> </div>{/notempty}
            <!--{if !empty($trip['showaddress']) || in_array($sub['activeType'],$activeTypeList)}{notempty name="$sub['address']"}<div>地址：<span style="margin-left: 10px">{$sub['address']}</span> </div> {/notempty}{/if}-->
            {if !empty($trip['showpoicontent']) || in_array($sub['activeType'],$activeTypeList)}{notempty name="$sub['poi_content']"}<div><span style="color: #7e7e7e">{$sub.poi_content}</span> </div> {/notempty}{/if}
            {if !empty($trip['showcontent']) || in_array($sub['activeType'],$activeTypeList)}{notempty name="sub['content']"}<div ><span>{$sub.content}</span> </div> {/notempty}{/if}
        </div>
        {notempty name="$sub.image_arr"}
        <div class="imgbox" style="margin:5px 0 10px 50px;">
            {volist name="sub['image_arr']" id="other_image" key="image_key"}
            {if substr($other_image,0,4)!=='http'}
            <img src="{baseurl}{$other_image}" alt="">
            {else}
            <img src="{$other_image}" alt="">
            {/if}
            {/volist}
        </div>
        {/notempty}
        {notempty name="trip.showthumb"}
        {notempty name="$sub['thumb']"}
        <div class="imgbox" id="imgbox{$sub['id']}" style="margin:5px 0 10px 50px;">
            {volist name='sub.thumb' id='sub_thumb_img'}
                {if substr($sub_thumb_img,0,4)!=='http'}
                    <img src="{baseurl}{$sub_thumb_img}" alt="">
                {else}
                    <img src="{$sub_thumb_img}" alt="">
                {/if}
            {/volist}
        </div>
        {/notempty}
        {/notempty}
        </div>
        {/volist}
        {/volist}
        <div>
        {/if}
        <!--文本行程 线路行程切换-->
            <!--更多条款-->
            {notempty name="$trip.customer_content"}
            {volist name="$trip.customer_content" id="value"}
            <h4 style="width:100%" class="border-line">{$value.title}：<pre>{$value.content}</pre></h4>
            {/volist}
            {/notempty}
            <!--更多条款-->
            {notempty name="$trip['showcareful']"}<h4 style="width:100%" class="border-line">注意事项：<pre>{$trip['careful']}</pre></h4>{/notempty}
            {notempty name="$trip['showprice']"}<h4 style="width:100%" class="border-line">费用包含：<pre>{$trip['price']}</pre></h4>{/notempty}
            {if !in_array($trip['service_type'],$onlyShowDescServiceTypeIds)}
            {notempty name="$trip['showprice']"}<h4 style="width:100%" class="border-line">费用不含：<pre>{$trip['priceno']}</pre></h4>{/notempty}
            {/if}
            {notempty name="$trip['showback']"}<h4 style="width:100%" class="border-line">退改规则：<pre>{$trip['back']}</pre></h4>{/notempty}
        {empty name='trip.tob_pdf'}
        <h4 style="float:left;width:100%" class="border-line">联系方式</h4>
        <div style="font-size: 16px">
            国内客服: +86 400-100-5295<br>
            北美客服: +1 800-932-1178<br>
            联系我们: support@kuaibangxing.com<br>
            官网：http://www.kuaibangxing.com<br>
            {notempty name="$trip['wx_qrcode']"}
            <img  style="width:150px" src="{$trip['wx_qrcode']|geturl}">
            {/notempty}
        </div>
        {/empty}
        </div>
        </div>
    </div>
</div>

{empty name="$showpwd"}
<div id="printbox" class="width1200" style="background-color:#f2f2f2;padding-top:50px;">
	<span id="print" onclick="preview(1)" class="layui-btn layui-btn-lg">
	    打印
	</span>
    <form action="" id="form">
        <input type="hidden" id="url" value="{$url}"/>
        <button id="button1" style="width: 200px;margin-left: 300px;margin-top: 30px" class="layui-btn layui-btn-lg" type="submit">生成PDF</button>
    </form>
    <form action="" id="pageform">
        <input type="hidden" id="pageurl" value="{$pageurl}"/>
        <button id="pagebutton1" style="width: 200px;margin-left: 300px;margin-top: 30px" class="layui-btn layui-btn-lg" type="submit">生成分页版PDF</button>
    </form>
    <form action="" id="wordform">
        <input type="hidden" id="wordurl" value="{$wordurl}"/>
        <button  id="button2" style="width: 200px;margin-left: 300px;margin-top: 30px" class="layui-btn layui-btn-lg" type="submit">生成WORD</button>
    </form>
    <!--<a style="width: 200px;margin-left: 300px;margin-top: 30px" class="word-export layui-btn layui-btn-lg" href="javascript:void(0)">WORD</a>-->
</div>
{/empty}


<script src="__PUBLIC__/layui/layui.js"></script>
<script>
    function preview(oper)
    {
        document.getElementById("printbox").style.display='none';
        window.print();
    }
</script>
<script>
    var message;
    layui.config({
        base: '__JS__/',
        version: '1.0.1'
    }).use(['app', 'message'], function() {
        var app = layui.app,
            $ = layui.jquery,
            layer = layui.layer;
        //将message设置为全局以便子页面调用
        message = layui.message;
        //主入口
        app.set({
            type: 'iframe'
        }).init();
    })
</script>
<script>
    $(function(){
        $('#form').submit(function(){
            if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)
            {
                alert('正在生成pdf，请耐心等待...');
                return false;
            }

            var height = $("#content").height();
            var url = $('#url').val();
            $(this).data('generate', true);
            $('#button1').text('正在生成pdf，请等待...').attr('disabled', true);
            var pdf_load = layer.load(2);
            $.ajax({
                type: 'POST',
                url: '/snap.php',
                data:{'url':url,'height':height},
                success: function(data){
                    var $form = $('<form method="GET"></form>');
                    $form.attr('action', '/'+data);
                    $form.appendTo($('body'));
                    $form.submit();
                    $('#form').data('generate', false);
                    $('#button1').text('生成PDF').attr('disabled', false);
                    layer.close(pdf_load);
                }
            });

            return false;
        });
        //生成分页pdf
        $('#pageform').submit(function(){
            if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)
            {
                alert('正在生成分页版pdf，请耐心等待...');
                return false;
            }

            var height = $("#content").height();
            var url = $('#pageurl').val();
            $(this).data('generate', true);
            $('#pagebutton1').text('正在生成分页版pdf，请等待...').attr('disabled', true);
            var pdf_page_load = layer.load(2);
            $.ajax({
                type: 'POST',
                url: '/snappage.php',
                data:{'url':url,'height':height},
                success: function(data){
                    var $form = $('<form method="GET"></form>');
                    $form.attr('action', '/'+data);
                    $form.appendTo($('body'));
                    $form.submit();
                    $('#form').data('generate', false);
                    $('#button1').text('生成PDF').attr('disabled', false);
                    layer.close(pdf_page_load);
                }
            });

            return false;
        });
        $('#wordform').submit(function(){
            if (typeof($(this).data('generate')) !== 'undefined' && $(this).data('generate') === true)
            {
                alert('正在生成word，请等待...');
                return false;
            }

            $(this).data('generate', true);
            $('#button2').text('正在生成word，请等待...').attr('disabled', true);
            var word_load = layer.load(2);
            $.ajax({
                type: 'GET',
                url: '/html2word.php',
                data: 'url=' + $('#wordurl').val(),
                success: function(data){
                    var $form = $('<form method="GET"></form>');
                    $form.attr('action', '/'+data);
                    $form.appendTo($('body'));
                    $form.submit();
                    $('#wordform').data('generate', false);
                    $('#button2').text('生成WORD').attr('disabled', false);
                    layer.close(word_load);
                }
            });

            return false;
        });

        $(".triangle").click(function(){
            var showOther = $(this).parent().parent().find(".showOther");
            var dataValue = showOther.attr("data-value");
            if(dataValue==0){
                showOther.show();
                showOther.attr("data-value",1);
            }else{
                showOther.hide();
                showOther.attr("data-value",0);
            }
            return false;
        });
    });
</script>

</body>
</html>
